<template>
    <div>
        <van-col class="my-record">
            <van-tabs v-model:active="activeTab" title-active-color="#07c160" title-inactive-color="#000">
                <van-tab title="漂入记录">
                    <van-col>
                        <div class="load-main" v-if="showLoading">
                            <van-loading style="margin-bottom: 15px"/>
                            <span>加载中</span>
                        </div>
                        <template v-if="!showLoading">
                            <van-row v-for="(item, index) in inRecords" :key="index" class="row-box">
                            <van-col span="16">
                                <div class=" line-h-24 ft-c-666 ft-w-b ft-s-18">
                                    {{ formatTimestampToDate(item.createTime) }}
                                </div>
                            </van-col>
                            <van-col span="8" class="text-a-r">
                            <span class="ft-c-333 ">
                               <van-tag :type="getStatusType(item.processStatus)" size="large">
                                   {{ getStatusName(item.processStatus) }}
                               </van-tag>
                            </span>
                            </van-col>
                            <van-row class="wh-100 book-line-row"
                                     v-for="(item2, index2) in item.bookResList" :key="index2">
                                <van-col span="14">
                                    <div class="ft-c-666 title-box">
                                        《{{ item2.title }}》
                                    </div>
                                </van-col>
                                <van-col span="10">
                                    <div class=" ft-c-999 text-a-r">
                                        {{ item2.isbn }}
                                    </div>
                                </van-col>
                            </van-row>
                            <van-col span="24">
                                <div v-if="item.processStatus === -1 && item.initialReviewDes != null" class="reason mt-15">初审说明： {{ item.initialReviewDes }}</div>
                                <div v-if="item.processStatus === -1 && item.finalReviewDes != null" class="reason mt-15">终审说明： {{ item.finalReviewDes }}</div>
                            </van-col>
                        </van-row>
                        </template>
                        <div class="nodata-main" v-if="inRecords.length===0">暂无数据</div>
                    </van-col>
                </van-tab>
                <van-tab title="漂出记录">
                    <!-- 漂出记录内容 -->
                    <van-col>
                        <van-row v-for="(item, index) in outRecords" :key="index" class="row-box">
                            <van-col span="16">
                                <div class=" line-h-24 ft-c-666 ft-w-b ft-s-18">
                                    {{ formatTimestampToDate(item.createTime) }}
                                </div>
                            </van-col>
                            <van-col span="8" class="text-a-r">
                            <span class="ft-c-333 ">
                               <van-tag :type="getStatusType(item.processStatus)" size="large">{{
                                       getStatusName(item.processStatus)
                                   }}</van-tag>
                            </span>
                            </van-col>
                            <van-row class="wh-100 book-line-row"
                                     v-for="(item2, index2) in item.bookResList" :key="index2">
                                <van-col span="12">
                                    <div class=" ft-c-666 title-box">
                                        《{{ item2.title }}》
                                    </div>
                                </van-col>
                                <van-col span="12">
                                    <div class=" ft-c-999 text-a-r">
                                        {{ item2.isbn }}
                                    </div>
                                </van-col>
                            </van-row>
                            <van-col span="24">
                                <div v-if="item.processStatus === -1 && item.initialReviewDes != null" class="reason mt-15">初审说明： {{ item.initialReviewDes }}</div>
                                <div v-if="item.processStatus === -1 && item.finalReviewDes != null" class="reason mt-15">终审说明： {{ item.finalReviewDes }}</div>
                            </van-col>
                        </van-row>
                        <div class="nodata-main" v-if="outRecords.length==0">暂无数据</div>
                    </van-col>
                </van-tab>
            </van-tabs>
            <!--返回按钮-->
            <van-button
                icon="wap-home-o"
                class="fixed-back-button"
                @click="goBack"
            />
        </van-col>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
//@ts-ignore
import {bookApi} from "../api/lbBook.ts";
import {onMounted} from 'vue';

const showLoading = ref(false);
// 新增返回按钮功能
const goBack = () => {
    window.history.back();
};

const activeTab = ref(0);

const inRecords = ref(
    [
        {
            createTime: 0,
            bookResList: [
                {title: '', isbn: ''},
            ],
            processStatus: 10,
            initialReviewDes: '',
            finalReviewDes: '',
        },
    ]
);

const outRecords = ref(
    [
        {
            createTime: 0,
            bookResList: [
                {title: '', isbn: ''}
            ],
            processStatus: -1,
            initialReviewDes: null,
            finalReviewDes: ''
        }
    ]);

const formatTimestampToDate = (timestamp: number): string => {
    const date = new Date(timestamp);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
};


const getStatusType = (status: number) => {
    switch (status + "") {
        case "10":
            return 'primary';
        case "20":
            return 'warning';
        case "100":
            return 'success';
        case "-1":
            return 'danger';
        default:
            return 'primary';
    }
};
const getStatusName = (status: number) => {
    switch (status + "") {
        case "10":
            return '初审中';
        case "20":
            return '终审中';
        case "100":
            return '已通过';
        case "-1":
            return '已驳回';
        default:
            return '状态异常';
    }
};

const getHomeInfo = () => {
    showLoading.value = true;
    //获取当前状态
    bookApi.myInApplies({}).then((res) => {
        console.log("nowInfo", res);
        inRecords.value = res
        showLoading.value = false;
    });
    bookApi.myOutApplies({}).then((res) => {
        console.log("getUserInfo", res);
        outRecords.value = res
    });

};

/** 初始化 **/
onMounted(() => {
    getHomeInfo();
})
</script>

<style scoped lang="scss">
.my-record {
    padding: 1rem;
}

.book-info {
    margin-bottom: 0.5rem;
}

.row-box {
    background-color: white;
    padding: 1rem;
    margin-bottom: .8rem;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgb(175 175 175 / 10%);
}

.reason {
    background-color: #ffebee;
    color: #f44336;
    padding: 0.5rem .8rem;
    margin-top: 0.5rem;
    border-radius: 6px;
}

::v-deep .van-tabs__wrap {
    border-radius: 6px;
    //box-shadow: 0 4px 10px rgb(175 175 175 / 10%);
}

.wh-100 {
    width: 100%;
}

.book-line-row {
    height: 36px;
    line-height: 36px;
}

.nodata-main {
    text-align: center;
    color: #ccc;
    height: 200px;
    line-height: 300px;
}

.load-main {
    text-align: center;
    color: rgb(204, 204, 204);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 300px;
}

.title-box {
    height: 36px;
    line-height: 36px;
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 超出用省略号表示 */
}

::v-deep .van-tabs__content {
    height: 90vh;
    overflow-y: scroll;
    margin-top: 1rem;
}

</style>
